<template>

   <!-- <div class="home"></div> -->
   <mt-swipe :auto="4000" class="mysw">
      <mt-swipe-item class="slide1" v-for="sw in bannerImgs" :key="sw.id"><img :src="sw.imageUrl" :alt="sw.boardName" class="im"></mt-swipe-item>
    </mt-swipe>

</template>

<script>
export default {
  name: 'hq-swipe',

  data () {
    return {
      bannerImgs: []
    }
  },
  created () {
    this.$http.getHomeBanner()
      .then(res => {
        if (res.data.code === 200) {
          this.bannerImgs = res.data.data.banners
        }
      })
  }
}
</script>

<style scoped>
  .mysw {
        height: 200px;
        color: red;
        font-size: 30px;
        text-align: center;
        /* margin-bottom: 20px; */
      }
      mint-swipe-item {
        line-height: 200px;
      }
      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
      .im{
        width:100%;
        height: 200px;
      }
</style>
